﻿var obj = null;
var initId = 0;
var curId = 0;
var steps = new Array();
var enable = true;
var groups = [];
var curIndex = 0;

$.fn.initMap = function (id) {
    obj = this;
    curId = id;
    initId = id;

    initHTML();
    gotoSpotById(id, 1);

    for (i = 0; i < groups.length; i++) {
        if (id == groups[i].id) {
            curIndex = i;
            break;
        }
    }
};

function initHTML() {
    $(obj).append('<div id="controls"><a id="prevSpot" title="Previous"><span>.</span></a><a id="spotList" title="List"><span>.</span></a><a id="nextSpot" title="Next"><span>.</span></a><img class="preload" /></div>');

    $('div#controls').css('left', ($(obj).width() - $('div#controls').width()) / 2 + 'px')

    $(obj).hover(function () {
        $('div#controls').animate({ bottom: 10 + 'px' }, 300);
    }, function () {
        $('div#controls').animate({ bottom: -80 + 'px' }, 300);
    });

    var temp = [];

    $.each(imagesCollection.image, function () {
        if (!temp.has(this["group"])) {
            temp.push(this["group"]);
            groups.push({ id: this["id"], src: this["src"] });
        }
    });

    $('a.home').unbind();

    $('a.home').click(function () {
        steps = new Array();
        gotoSpotById(initId, 1);
    });

    $('a.close').click(function () { gotoSpotById(0, -1); });

    $('a#list').click(function () { $('div#image-list').slideToggle('slow'); });

    $('a.image-item').live('click', function () {
        $('div#image-list').hide();
        steps = new Array();
        gotoSpotById($(this).attr('spotId'), 1);
    });

    $('a#prevSpot').click(function () {
        if (curIndex == 0) return;
        curIndex -= 1;
        gotoSpotById(groups[curIndex].id, 1);
    });

    $('a#spotList').click(function () { $('div#image-list').toggle(); });

    $('a#nextSpot').click(function () {
        if (curIndex == groups.length - 1) return;
        curIndex += 1;
        gotoSpotById(groups[curIndex].id, 1);
    });
}

function gotoSpotById(id, type) {
    if (!enable) return;
    enable = false;

    hideTooltip();

    var image = null;

    if (type == 1) {
        image = getById(imagesCollection.image, id);

        if (null == image || undefined == image) {
            enable = true;
            return;
        }

        curId = image.id;
        addStep(curId);
    }
    else {
        if (steps.length != 1) removeStep();

        curId = steps[steps.length - 1];
        image = getById(imagesCollection.image, curId);

        if (null == image || undefined == image) {
            enable = true;
            return;
        }
    }

    ajaxLoad('{0}'.format(image.src), function () {
        $(obj).unbind('ready');
        $(obj).css('background-image', 'url("{0}")'.format(image.src));
        $(obj).ready(function () {
            $(obj).fadeIn('slow');
            $('a.spot, a.area, div.info, a.info, div.area, div.tooltip, div#image-list').remove();

            initSpot(image);
            initArea(image);
            initInfo(image);
            initTooltip(image);
            initList();

            $('a.spot, a.info, div.tooltip').tooltip({ track: true, delay: 0, showURL: false, showBody: " - " });

            enable = true;
        });
    });
}

function initList() {
    var s = '<div id="image-list">';

    for (i = 0; i < groups.length; i++) {
        s += '<a class="image-item" spotId="{0}"><img src="{1}" /></a>'.format(groups[i].group, groups[i].src);
    }

    s += '</div>';

    $(obj).append(s);
}

function initSpot(img) {
    if (null == img.spot || img.spot.length == 0) return;

    for (i = 0; i < img.spot.length; i++) {
        $(obj).append('<a class="spot" spotId="{0}" title="{1}" style="left: {2}px; top: {3}px;"><span>.</span></a>'.format(img.spot[i].to, img.spot[i].info, img.spot[i].x, img.spot[i].y));
    }

    $('a.spot, a.list-item').unbind();

    $('a.spot, a.list-item').click(function () {
        gotoSpotById($(this).attr('spotId'), 1);
    });
}

function initArea(img) {
    if (null == img.area || img.area.length == 0) return;

    for (i = 0; i < img.area.length; i++) {
        $(obj).append('<div class="area" style="left: {0}px; top: {1}px;">{2}</div>'.format(img.area[i].x, img.area[i].y, img.area[i].content));
    }
}

function initInfo(img) {
    if (null == img.info || img.info.length == 0) return;

    for (i = 0; i < img.info.length; i++) {
        $(obj).append('<div class="info" infoId="{0}" style="width: {1}px; height: {2}px; left: {3}px; top: {4}px;"><a class="hide">x</a><h3>{5}</h3>{6}<span class="more"><a href="{7}" target="_blank">more</a></span></div><a class="info" infoId="{8}" title="{9}" style="left: {10}px; top: {11}px;"><span>.</span></a>'.format(img.info[i].id, img.info[i].width, img.info[i].height, img.info[i].x, img.info[i].y, img.info[i].title, img.info[i].content, img.info[i].url, img.info[i].id, img.info[i].title, img.info[i].x, img.info[i].y));
    }

    $('div.info').show();

    $('div.info a.hide').click(function () {
        $(this).parent().animate({ opacity: 0, top: $(obj).height() }, 1000, function () { $(this).hide(); });
    });

    $('a.info').click(function () {
        var id = $(this).attr('infoId');
        var topPosition = $(this).css('top');

        $('div[infoId={0}]'.format(id)).show();
        $('div[infoId={0}]'.format(id)).animate({ opacity: 1, top: topPosition }, 1000);
    });
}

function initTooltip(img) {
    if (null == img.tooltip || img.tooltip.length == 0) return;

    var w = 0;
    var h = 0;

    for (i = 0; i < img.tooltip.length; i++) {
        w = Math.abs(parseInt(img.tooltip[i].x2) - parseInt(img.tooltip[i].x1));
        h = Math.abs(parseInt(img.tooltip[i].y2) - parseInt(img.tooltip[i].y1));
        $(obj).append('<div class="tooltip" title="{0}" style="left: {1}px; top: {2}px; width: {3}px; height: {4}px;"></div>'.format(img.tooltip[i].content, img.tooltip[i].x1, img.tooltip[i].y1, w, h));
    }
}

function getById(collection, id) {
    if (null == collection || undefined == collection || 0 == collection.length) return null;

    var ret = null;

    for (i = 0; i < collection.length; i++) {
        if (collection[i].id == id) {
            ret = collection[i];
            break;
        }
    }

    return ret;
}

function ajaxLoad(url, callback) {
    $(obj).activity({ segments: 12, width: 5.5, space: 6, length: 13, color: '#252525', speed: 1.5 });

    var img = new Image();

    img.onload = function () {
        $(obj).activity(false);
        $(obj).fadeOut('slow', function () { callback(); });
    };

    img.src = url;
}

function hideTooltip() {
    $('#tooltip').hide();
}

function setDadId(id) {
    $('#backToDad').attr('to', id);
}

function addStep(id) {
    steps.push(id);
}

function removeStep() {
    steps.pop();
}

String.prototype.format = function () {
    var s = this;
    var i = arguments.length;

    while (i--) {
        s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
    }
    return s;
};

Array.prototype.has = function (n) {
    for (i = 0; i < this.length; i++) {
        if (this[i] === n) return true;
    }

    return false;
};